<template>
  <div id="main">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="1">
        <div>
          <el-carousel :interval="5000" arrow="always" style="width:100%;height:350px">
            <el-carousel-item v-for="item in 4" :key="item" style="width:100%;height:350px"></el-carousel-item>
          </el-carousel>
        </div>
      </el-collapse-item>
      <el-collapse-item title='阿玛尼' name="2">
        <ul>
          <li>
            <img src="../assets/76.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/77.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num1"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num1*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/78.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num2"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num2*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/79.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num3"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num3*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/80.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num4"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
              @blur="blur(num4*5)"
              :plain="true"
            ></el-input-number>

          </li>
        </ul>
      </el-collapse-item>
      <el-collapse-item title="花西子" name="3">
        <ul>
          <li>
            <img src="../assets/21.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/39.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num1"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num1*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/33.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num2"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num2*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/32.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num3"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num3*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/37.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num4"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
              @blur="blur(num4*5)"
              :plain="true"
            ></el-input-number>

          </li>
        </ul>
      </el-collapse-item>
      <el-collapse-item title="纪梵希" name="4">
       <ul>
          <li>
            <img src="../assets/76.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/77.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num1"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num1*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/78.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num2"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num2*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/79.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num3"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
               @blur="blur(num3*105)"
            ></el-input-number>
          </li>
          <li>
            <img src="../assets/80.jpg" />
            <br />请加入购物车：
            <el-input-number
              v-model="num4"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
              @blur="blur(num4*5)"
              :plain="true"
            ></el-input-number>

          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      num1: 1,
      num2: 1,
      num3: 1,
      num4: 1,
      activeNames: ["1"],
      imgArray: [
        require("@/assets/21.jpg"),
        require("@/assets/22.jpg"),
        require("@/assets/23.jpg"),
        require("@/assets/24.jpg")
      ]
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
   blur(val){
      const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, '施主你的这款商品已经添加了 '),
            h('i', { style: 'color: teal' }, val+"元的商品到购物车哦")
          ])
        });
   }
  }
};
</script>








<style scoped>
ul {
  list-style: none;
}
ul li {
  display: block;
  float: left;
  margin: 5px;
}
#main {
  height: 90%;
  background: aquamarine;
  width: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background: url(../assets/10.jpg);
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.el-carousel__item:nth-child(2n + 1) {
  background: url(../assets/1010.jpg);
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}
  img:hover{

                 box-shadow: 10px 10px 10px rgba(26, 139, 83, 0.5);
                 transform: scale(0.78) rotate(45deg);
                 /*考虑浏览器兼容性*/

                 -moz-box-shadow: 10px 10px 10px  rgba(26, 139, 83, 0.5);

                 -webkit-box-shadow: 10px 10px 10px  rgba(26, 139, 83, 0.5);

            }
</style>